import {useState} from 'react'
function Test2 (){
    // 参数：状态初始值 （比如，传入0，表示该状态的初始值为0）
    const [count,setCount] = useState(0)
    // 以字符串为初始值
    const [name,setName] = useState('cp')
    // 以数组为初始值
    const [list,setList] = useState([])
    // 在这里可以进行打印测试
    console.log(count);
    return (
        <button onClick={()=> setCount(count + 1) }>{count}</button>
    )
}
export default Test2

/**
 * ## 组件的更新过程
 *  函数组件使用useState hook后的执行过程，以及状态值的变化：
 *      一、组件第一次渲染
 *          1.从头开始执行该组件的代码逻辑
 *          2.调用useState(0) 将传入的参数作为状态初始值，即0
 *          3.渲染组件，此时，获取到的状态count值为0
 *      二、组件第二次渲染
 *          1.点击按钮，调用setCount(count + 1) 修改状态，因为状态发生变化，所以，该组件会重新渲染
 *          2.组件重新渲染时,会再次执行该组件中的代码逻辑
 *          3.再次调用useState(0),此时React内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为1
 *          4.再次渲染组件时，此时，获取到的状态count值为1  
 *   注意：useState的初始值（参数）只会在组件的第一次渲染时生效。（也就是说，以后的每次渲染，useState获取到的都是最新的状态值，React组件会记住每次最新的状态值。）
 * 
 *   使用规则：
 *          1. useState 函数可以执行多次，每次执行互相独立，每调用一次函数组件提供一个状态
 *          2. useState 注意事项： ① 只能出现在函数组件中 
 *                                 ② 不能嵌套在if/for其他函数中---> hooks的顺序要固定。（react按照hooks的调用顺序识别每一个hook） 
 *          3. 可以通过开发者工具查看hooks状态
 */